import React from "react";
import "../css/InputBox.css";
import {PENDDING} from "./config";

class InputBox extends React.Component{
  //定义组件的初始化状态
  constructor(props){
    super(props)

  }

  render(){
    return(
      <div className="input_box_container">
        <div>
          <input ref="todoInput"/>
        </div>
        <div>
          <button onClick={()=>{
            //获取输入框的value
            var value = this.refs.todoInput.value;
            //容错判断 
            if(value.length === 0){
              alert("添加的内容不能为空");
              return;
            }

            //组装todo对象
            var todo = {
              content:value,
              status:PENDDING//未经定义的魔法值
            }
            this.props.addTodo(todo)
          }}>添加todo</button>
        </div>
      </div>
    );
  }
}

export default  InputBox;